import React from "react";
import "./index.less";
import construction from "../../statics/images/construction.png";
import {Flex} from "antd";

export default function Products() {
    return (
        <div className="product-range">
            <h2>Select a product</h2>
            <Flex justify={"center"} style={{marginBottom: '20px'}}><a
                href={'https://wa.me/8618303951089?text=hi'} target="_blank" rel="noopener noreferrer">WhatsApp Contact us</a></Flex>
            <div className="container">
                <div className="pxPopularHeader">Product details</div>
                <div className="row">
                    {[
                        {
                            text: "1",
                            name: 'High-speed disperser',
                            tips: 'If you need to inquire about other specifications, please contact us! Can be customized!',
                            params: 'Power: 22 kilowatts, size: length 1.9X width 0.8X height 1.85m',
                            img: 'http://47.115.148.248:9000/officeweb/product/fen_san_ji.jpg'
                        },
                        {
                            text: "2",
                            name: 'Mixer production line',
                            tips: 'If you need to inquire about other specifications, please contact us! Can be customized!',
                            params: ' Power: main motor: 11KW, loading motor: 4KW, size: length 3*width 1*height 2.2m, mixing capacity: 1 ton',
                            img: 'http://47.115.148.248:9000/officeweb/product/hun_liao_ji.png'
                        },
                        {
                            text: "3",
                            name: 'Chili shearing ',
                            tips: 'If you need to inquire about other specifications, please contact us! Can be customized!',
                            params: 'Size: 5.05×3.33×2.5 meters, power: 8.8kw',
                            img: 'http://47.115.148.248:9000/officeweb/product/la_jiao_jian_ti_ji.jpg'
                        },
                        {
                            text: "4",
                            name: 'Wall panel installation machine',
                            tips: 'If you need to inquire about other specifications, please contact us! Can be customized!',
                            params: 'Power: lifting motor: 1500w, walking motor: 800w, working voltage: 48v, size: length 1.8*width 1.1*height 2.4m',
                            img: 'http://47.115.148.248:9000/officeweb/product/qiang_ban_an_zhuang_ji.jpg'
                        },
                        {
                            text: "5",
                            name: 'Portable cutting saw',
                            tips: 'If you need to inquire about other specifications, please contact us! Can be customized!',
                            params: 'Dimensions: length 94.5X width 26X height 55.8 CM',
                            img: 'http://47.115.148.248:9000/officeweb/product/qie_ge_ju.jpg'
                        },
                        {
                            text: "6",
                            name: 'Suction cup glass installation machine',
                            tips: 'If you need to inquire about other specifications, please contact us! Can be customized!',
                            params: 'Power: lifting motor: 1500w, walking motor: 1200w, working voltage: 48v, size: length 1.9*width 0.95*height 1.75m',
                            img: 'http://47.115.148.248:9000/officeweb/product/xi_pan_an_zhuang_ji.jpg'
                        },
                        {
                            text: "7",
                            name: 'Inclined pallet truck',
                            tips: 'If you need to inquire about other specifications, please contact us! Can be customized!',
                            params: 'Dimensions: length 1.3*width 0.7m',
                            img: 'http://47.115.148.248:9000/officeweb/product/yun_shu_che_ji.jpg'
                        },
                        {
                            text: "8",
                            name: 'Real stone paint mixer',
                            tips: 'If you need to inquire about other specifications, please contact us! Can be customized!',
                            params: 'Power: main motor: 7.5kw, loading motor: 4kw, size: length 2.5*width 1.2*height 1.8m, mixing capacity: 1 ton',
                            img: 'http://47.115.148.248:9000/officeweb/product/zheng_shi_jiao_ban_ji.jpg'
                        },
                        // {text: "Access Platforms", img: construction},
                        // {text: "Access Platforms", img: construction},
                        // {text: "Access Platforms", img: construction},
                        // {text: "Access Platforms", img: construction},
                        // {text: "Access Platforms", img: construction},
                        // {text: "Access Platforms", img: construction},
                        // {text: "Access Platforms", img: construction},
                        // {text: "Access Platforms", img: construction},
                        // {text: "Access Platforms", img: construction},
                        // {text: "Access Platforms", img: construction},
                    ].map((item, index) => {
                        return (
                            // <a href="/discoverMore" className="itemWrap" key={index}>
                            //     <div className="item">
                            //         <img className="img" src={item.img}/>
                            //     </div>
                            // </a>
                            <Flex className="cardStyle" key={index} align={"center"} gap={8}
                                  style={{width: '100%'}}>
                                <img className="img" style={{borderRadius: '8px'}} src={item.img}/>
                                <Flex className='item-style' vertical={true} gap={16}>
                                    <div>{item?.name}</div>
                                    <div>{item?.params}</div>
                                    <div>{item?.tips}</div>
                                </Flex>
                            </Flex>
                        );
                    })}
                </div>
            </div>
        </div>
    );
}
